<template>
  <div class="figure-card">
    <div class="bottom-box" :style="{ backgroundColor: style.backgroundColor }"></div>
    <div class="top-box" :style="{ ...background }"></div>
  </div>
</template>

<script>
  import borderMixin from '@/mixins/borderMixin';
  import { encodeBackgroundStyle } from '@/utils';
  export default {
    mixins: [borderMixin],
    props: {
      widget: { type: Object, default: () => ({}) }
    },
    computed: {
      config() {
        return this.widget.config;
      },
      style() {
        return this.widget.style;
      },
      // 背景色
      background() {
        const background = encodeBackgroundStyle(this.config.background);
        if (this.config.background.fillType === 2 && background.backgroundImage)
          background.backgroundImage = `url(${this.$staticRes(background.backgroundImage)})`;
        return background;
      }
    },

    watch: {
      'style.height': function (val) {
        if (val < 92) this.style.height = 92;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .figure-card {
    position: relative;
    height: 500px;
  }

  .top-box {
    position: absolute;
    top: 20%;
    left: 3%;
    width: 100%;
    height: 80%;
    box-shadow: 10px 10px 5px rgba(206, 217, 238, 1);
    transform: skew(-30deg);
  }

  .bottom-box {
    position: absolute;
    top: 0;
    left: -1%;
    width: 100%;
    height: 80%;
    transform: skew(-30deg);
  }
</style>
